<!-- 首页-我的 -->
<script setup>
	import {
		reactive,
		ref,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	// 引入卡券弹窗组件
	import SelectCoupon from '@/components/SelectCoach.vue';
	import {
		getUserInfoApi
	} from '@/api/my'
	import {
		getNoticUnReadCountApi
	} from '@/api/public'
	import {
		log
	} from 'console';
	// 全局页面数据
	const data = reactive({
		barHeight: 0,
		navHeight: 0,
		msgNum: 0,
		userId: '',
		show: false,
		userInfo: {}
	})
	onLoad(() => {
		//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
		let {
			statusBarHeight
		} = uni.getSystemInfoSync()
		data.barHeight = statusBarHeight
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		data.navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2
		// this.getList()
	})
	// 页面显示时
	onShow(() => {
		data.userId = uni.getStorageSync('userId');
		if (data.userId !== '') {
			initData()
		}
	})
	// 初始化数据获取
	const initData = () => {
		getUserInfo()
		getNoticUnReadCount()

	}
	// 获取用户信息
	const getUserInfo = () => {
		getUserInfoApi(data.userId)
			.then(res => {
				console.log(res)
				data.userInfo = res.data
			})
	}

	// 获取未读消息
	const getNoticUnReadCount = () => {
		getNoticUnReadCountApi({
				userId: data.userId
			})
			.then(res => {
				data.msgNum = res.data
			})
	}
	// 拨打客服电话
	function callCustomerService() {
		// uni.makePhoneCall({
		// 	phoneNumber: '114' //仅为示例
		// }).catch(e => {})

		uni.navigateTo({
			url: '/subPackage/my/coupon/index'
		})
	}


	// 前往卡券列表
	const goToCoupon = () => {
		uni.navigateTo({
			url: '/subPackage/my/coupon/index'
		})
	}
	// 前往消息列表
	const goToMessage = () => {
		uni.navigateTo({
			url: '/subPackage/my/user/message'
		})
	}
	// 分享
	const share = () => {
		console.log('uni.share', uni.share)
		uni.share({
			provider: 'weixin',
			scene: "WXSceneSession",
			type: 5,
			imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/share-logo@3.png',
			title: '欢迎体验uniapp',
			miniProgram: {
				id: 'gh_abcdefg',
				path: 'pages/index/index',
				type: 0,
				webUrl: 'http://uniapp.dcloud.io'
			},
			success: ret => {
				console.log(JSON.stringify(ret));
			}
		});
	}

	// 前往登录页面
	const goToLoginPage = () => {
		uni.navigateTo({
			url: '/pages/home/login'
		})
	}

	// 点击编辑资料跳转
	const editDataClick = () => {
		uni.navigateTo({
			url: `/subPackage/my/user/editData?userInfo=${JSON.stringify(data.userInfo)}`
		})
	}

	// 点击订单跳转
	const goToOrderList = (val) => {
		// console.log(val, 'ceshi');
		uni.navigateTo({
			url: `/subPackage/my/order/index?val=${val}`
		})
	}
	// // 点击待使用跳转
	// const useClick = () => {
	// 	uni.navigateTo({
	// 		url: '/subPackage/my/order/index'
	// 	})
	// }
</script>

<template>
	<view class="my-page">
		<!-- head -->
		<view class="head">
			<!-- 背景图片 -->
			<image src="/static/images/my/head_bg.png" style="width: 100vw;height: 626rpx;" mode="widthFix"
				class="bg-img">
			</image>
			<!-- 头部内容 -->
			<view class="head-content" :style="{ 'padding-top': data.barHeight + 'px' }">
				<!-- navbar -->
				<view class="navbar" :style="{ 'height': data.navHeight + 'px' }">
					<!-- 消息 -->
					<!-- 	<view class="message-box" @click="goToMessage">
						<up-badge :type="'error'" max="99" :value="data.msgNum" :absolute="true"
							:offset="[-5, -5]"></up-badge>
						<image src="/static/images/icons/message.png" mode="scaleToFill"
							style="width: 48rpx; height: 48rpx;" />
					</view> -->
				</view>
				<!-- 用户信息 -->
				<view class="user-info-box">
					<!-- 用户数据 -->
					<view class="user-data">
						<view class="left">
							<!-- 头像 -->
							<view class="avatar-box">
								<!-- 头像 -->
								<up-avatar v-if="data.userInfo.userId" size="80"
									:src="data.userInfo.avatar"></up-avatar>
								<up-avatar v-else size="80" :src="`/static/images/my/avatar.png`"></up-avatar>
								<!-- 性别 -->
								<view class="sex">
									<image src="/static/images/my/male.png" mode="widthFix"
										style="width: 32rpx; height: 32rpx;" v-if="data.userInfo.sex===1" />
									<image src="/static/images/my/female.png" mode="widthFix"
										style="width: 32rpx; height: 32rpx;" v-if="data.userInfo.sex===0" />
								</view>
							</view>
							<!-- 用户名和氧气ID -->
							<view class="user-info">
								<template v-if="data.userInfo.userId">
									<view class="name">{{ data.userInfo.userName }}</view>
									<view class="oxygen-id">氧气ID： {{ data.userInfo.userId }}</view>
								</template>
								<view v-else class="not-login" @click="goToLoginPage">
									点击登录
								</view>
							</view>
						</view>
						<!-- 编辑资料入口 -->
						<!-- <view class="edit-btn" >编辑资料</view> -->
					</view>
					<!-- 自我评价 -->
					<view class="evaluate-box">
						<!-- <text>
              爱好健身、篮球🏀\n喜欢好的书籍、音乐、电影✌️\n希望能够给大家带来快乐🌈，分享健康🌿！
            </text> -->
						<text>
							个人说明：{{ data.userInfo.desc || `暂时还没有简介~` }}
						</text>
					</view>

				</view>
			</view>
		</view>
		<!-- 预约课程到时间提醒 -->
		<view v-if="false" class="remind-box">
			<view class="left">
				<image src="/static/images/icons/remind.png" mode="widthFix" style="width: 36rpx; height: 36rpx;" />
				<view class="tip-info">
					<text>您预约的 </text>
					<text>{{ `<Rieon健身...>` }}</text>
					<text> 距开始还剩</text>
				</view>
				<view class="time">
					<text class="num">19</text>
					<text class="unit">分钟</text>
				</view>
			</view>
			<view class="look-box">
				<text>查看</text>
				<up-icon color="#008043" size="10" name="arrow-right"></up-icon>
			</view>
		</view>
		<!-- 订单模块 -->
		<view class="order-box">
			<view class="head">
				<text class="title">我的订单</text>
				<text class="allOrders" @click="goToOrderList('')">全部订单></text>
			</view>
			<up-grid :border="false" :align="`center`" :col="4">
				<up-grid-item @click="goToOrderList(1)">
					<view style="position: relative;">
						<up-badge :type="'error'" max="99" :value="0" :absolute="true" :offset="[2, -5]"></up-badge>
						<image style="width: 48rpx; height: 48rpx;" src="/static/images/my/obligations.png"
							mode="scaleToFill" />
					</view>
					<text class="grid-text">待付款</text>
				</up-grid-item>
				<up-grid-item @click="goToOrderList(2)">
					<image style="width: 48rpx; height: 48rpx;" src="/static/images/my/tobeused.png"
						mode="scaleToFill" />
					<text class="grid-text">待使用</text>
				</up-grid-item>
				<up-grid-item @click="goToOrderList(5)">
					<image style="width: 48rpx; height: 48rpx;" src="/static/images/my/tobeevaluated.png"
						mode="scaleToFill" />
					<text class="grid-text">待评价</text>
				</up-grid-item>
				<up-grid-item @click="goToOrderList(8)">
					<image style="width: 48rpx; height: 48rpx;" src="/static/images/my/aftersale.png"
						mode="scaleToFill" />
					<text class="grid-text">售后/退款</text>
				</up-grid-item>
			</up-grid>
		</view>

		<!-- 工具与服务模块 -->
		<view class="tools-box">
			<view class="head">
				<text class="title">我的功能</text>
			</view>
			<up-grid :border="false" :align="`center`" :col="4">
				<up-grid-item @click="editDataClick">
					<image style="width: 48rpx; height: 48rpx;" src="/static/images/my/personaldata.png"
						mode="scaleToFill" />
					<text class="grid-text">编辑资料</text>
				</up-grid-item>
				<up-grid-item @click="callCustomerService">
					<image style="width: 48rpx; height: 48rpx;" src="/static/images/my/cardcertificate.png"
						mode="scaleToFill" />
					<text class="grid-text">我的卡券</text>
				</up-grid-item>
				<up-grid-item>
					<button open-type="share" class="up-reset-button"
						style="display: flex; align-items: center; justify-content: center;flex-direction: column;">
						<image style="width: 48rpx; height: 48rpx;" src="/static/images/my/customerservice.png"
							mode="scaleToFill" />
						<text class="grid-text">联系客服</text>
					</button>
				</up-grid-item>
				<up-grid-item>
					<button open-type="share" class="up-reset-button"
						style="display: flex; align-items: center; justify-content: center;flex-direction: column;">
						<image style="width: 48rpx; height: 48rpx;" src="/static/images/my/myevaluation.png"
							mode="scaleToFill" />
						<text class="grid-text">我的评价</text>
					</button>
				</up-grid-item>
				<up-grid-item>
					<button open-type="share" class="up-reset-button"
						style="display: flex; align-items: center; justify-content: center;flex-direction: column; margin-top: 40rpx;">
						<image style="width: 48rpx; height: 48rpx;" src="/static/images/my/invitefriends.png"
							mode="scaleToFill" />
						<text class="grid-text">邀请好友</text>
					</button>
				</up-grid-item>
			</up-grid>
		</view>

		<div class="advertising-box">
			<image style="width: 100%; height: 268rpx;" src="/static/images/my/advertisingspace.png"
				mode="scaleToFill" />
		</div>

		<!-- 弹窗 -->
		<SelectCoupon :show="data.show" @close="data.show = false" />
	</view>
</template>

<style lang="scss" scoped>
	.my-page {
		min-height: 100vh;
		background: #F6F6F6;

		// head
		&>.head {
			position: relative;
			// height: 626rpx;

			// 背景图片
			& .bg-img {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}

			// 用户信息内容
			& .head-content {
				padding: 0 46rpx;
				position: relative;
				z-index: 2;

				// navbar
				& .navbar {
					display: flex;
					align-items: center;

					// 消息
					& .message-box {
						position: relative;
						// margin-left: 46rpx;
					}
				}

				// 用户信息
				& .user-info-box {
					margin-top: 16rpx;

					// 用户数据
					& .user-data {
						display: flex;
						align-items: center;
						justify-content: space-between;

						// 左侧
						& .left {
							display: flex;
							align-items: center;

							// 头像
							& .avatar-box {
								position: relative;

								& .sex {
									position: absolute;
									right: 2rpx;
									bottom: -2rpx;
								}
							}

							// 用户名和氧气ID
							& .user-info {
								margin-left: 40rpx;

								& .name {
									font-weight: 500;
									font-size: 36rpx;
									color: #303133;
								}

								& .oxygen-id {
									margin-top: 8rpx;
									font-weight: 400;
									font-size: 20rpx;
									color: #838385;
								}

								& .not-login {
									position: relative;
									font-weight: 500;
									font-size: 36rpx;
									color: #303133;

									&::after {
										content: "";
										position: absolute;
										bottom: 0;
										left: 0;
										width: 100%;
										height: 2rpx;
										background: #303133;
									}

									// text-decoration-line: underline;
								}
							}
						}

						// 右边 --编辑用户信息按钮
						& .edit-btn {
							width: 150rpx;
							height: 52rpx;
							line-height: 52rpx;
							text-align: center;
							font-weight: 400;
							font-size: 24rpx;
							color: #838385;
							border: 2rpx solid #D9D9D9;
							border-radius: 142rpx;
						}
					}

					// 自我评价
					& .evaluate-box {
						margin-top: 34rpx;
						min-height: 90rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #303133;
						line-height: 46rpx;
					}


				}
			}
		}

		// 预约课程到时间提醒
		& .remind-box {

			position: relative;
			z-index: 2;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 32rpx;
			padding: 22rpx 24rpx;
			height: 80rpx;
			background: linear-gradient(37deg, #FFFFFF 0%, #F0FDF3 100%);
			border-radius: 12rpx;

			& .left {
				display: flex;
				align-items: center;

				& .tip-info {
					margin-left: 16rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #303133;
				}

				& .time {
					margin-left: 36rpx;

					& .num {
						font-weight: 500;
						font-size: 32rpx;
						background: linear-gradient(180deg, #21FF2B 0%, #303133 50%, #303133 100%);
						background-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					& .unit {
						margin-left: 4rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #303133;
					}
				}
			}

			& .look-box {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 20rpx;
				color: #008043;
			}
		}

		// 订单模块
		& .order-box {
			position: relative;
			z-index: 2;
			padding: 24rpx 32rpx;
			margin: 0 46rpx;
			margin-top: 20rpx;
			background: #FFFFFF;
			// border-radius: 8rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			& .head {
				font-weight: 500;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;

				.title {
					font-weight: bold !important;
				}


				.allOrders {
					font-size: 24rpx;
					color: #303B45;
				}
			}

			&::v-deep .u-grid {
				margin-top: 20rpx;

				& .grid-text {
					margin-top: 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #303B45;
				}
			}
		}

		// 工具与服务模块
		& .tools-box {
			padding: 24rpx 32rpx;
			margin: 0 46rpx;
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 24rpx;

			& .head {


				.title {
					font-weight: 500;
					font-size: 28rpx;
					color: #303B45;
					font-weight: bold !important;
				}


			}

			&::v-deep .u-grid {
				margin-top: 20rpx;

				& .grid-text {


					margin-top: 8rpx;
					font-weight: Medium;
					font-size: 24rpx;
					color: #000000;
				}
			}
		}


		// 广告位模块
		.advertising-box {
			// padding: 24rpx 32rpx;
			margin: 0 46rpx;
			margin-top: 20rpx;
			// background: #FFFFFF;
			// border-radius: 24rpx;
		}

	}
</style>